<div ng-init="init()">
  <div class="form-group">
    <label class="control-label">App Id</label>
    <input type="text" class="form-control" ng-model="socialSettings.app_id">
  </div>
  <div class="form-group">
    <label class="control-label">App Secret</label>
    <input type="password" class="form-control" ng-model="socialSettings.app_secret">
  </div>
  <div class="form-group">
    <label class="control-label">Access Token</label>
    <textarea class="form-control" ng-model="socialSettings.access_token"></textarea>
  </div>
  <div class="form-group">
    <label class="control-label">Page Id</label>
    <select class="btn btn-secondary custom-select" ng-options="item.id as item.name for item in socialSettings.pages"
      ng-model="socialSettings.page_id"></select>
    <input type="text" class="form-control" ng-model="socialSettings.page_id">
  </div>
  <div class="form-group">
    <a class="btn btn-primary text-white" ng-if="socialSettings.posts.length>0" ng-click="syncPosts()">Sync</a>
    <a class="btn btn-primary text-white" ng-click="login()">Login</a>
    <a class="btn btn-primary text-white" ng-if="socialSettings.page_id" ng-click="loadFeeds()">Load Data</a>
  </div>
  <table class="table table-sm table-hover" cellspacing="0">
    <thead class="thead-light">
      <tr>        
        <th scope="col-3" style="width: 25%;">
          Title
        </th>
        <th scope="col-3" style="width: 25%;">
          Excerpt
        </th>
        <th scope="col-2" width="10%">
          Image
        </th>
        <th scope="col-3" width="10%">
          Created Date
        </th>

        <th scope="col-1" style="width: 5%;">Actions</th>
      </tr>
    </thead>
    <tbody class="sortable" ng-init="getList()">
      <tr ng-repeat="item in socialSettings.posts track by $index" class="sortable-item" sort-model="post"
        sort-model-id="{{item.id}}">
        <td>
            <input type="text" class="form-control sm" ng-model="item.title"/>
        </td>
        <td>
          <textarea class="form-control sm" ng-model="item.Excerpt"></textarea>
        </td>
        <td>
          <preview-image img-height="25" ng-if="item.image" img-src="item.image"></preview-image>          
        </td>
        <td>
          <small>
            {{item.created_time | utcToLocal}}
          </small>
        </td>


        <td>
          <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
            <a href="{{item.permalink_url}}" target="_blank" class="btn btn-light">
              <span class="fas fa-eye text-info"></span>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="6">
          <a class="btn btn-primary text-white" ng-if="socialSettings.prevUrl"
            ng-click="loadFeeds(socialSettings.prevUrl)">Prev</a>
          <a class="btn btn-primary text-white float-right" ng-if="socialSettings.nextUrl"
            ng-click="loadFeeds(socialSettings.nextUrl)">Next</a>
        </td>
      </tr>
    </tbody>
  </table>
  <pre>
    {{prettyJsonObj(socialSettings)}}
  </pre>
</div>
